<template>
  <div class="modal-content">
    <div class="title">
      <i class="iconfont icon-shuxian"></i><span>卫星</span>
    </div>
    <div class="main-content">
      <div class="left-nav">
        <el-menu
          mode="vertical"
          :default-openeds="opened"
          :default-active="defaultItem"
          background-color="#223958"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="el-menu-vertical-demo"
        >
          <template v-for="navItem in mockMenuData">
            <!-- 可展开的二级菜单 -->
            <template v-if="navItem.type === 1">
              <el-submenu :index="navItem.id" :key="navItem.id">
                <template #title>
                  <i v-if="navItem.icon" :class="navItem.icon"></i>
                  <span>{{ navItem.name }}</span>
                </template>
                <!-- 遍历子菜单 -->
                <template v-for="subItem in navItem.children">
                  <el-menu-item
                    :index="subItem.id"
                    :key="subItem.id"
                    @click="handleMenuItemClick(subItem)"
                    ><i v-if="subItem.icon" :class="subItem.icon"></i>
                    <span>{{ subItem.name }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>

            <!-- 不可展开的一级菜单 -->
            <template v-if="navItem.type === 2">
              <el-menu-item :index="navItem.id" :key="navItem.id">
                <i v-if="navItem.icon" :class="navItem.icon"></i>
                <span>{{ navItem.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
      <div class="right-info">
        <component :is="currentCpn"></component>
        <basic-btn></basic-btn>
      </div>
    </div>
  </div>
</template>
<script>
import "../../assets/img/speedControl/iconfont.css";
export default {
  data() {
    return {
      mockMenuData: [
        {
          name: "基础",
          id: "1",
          type: 1,
          children: [
            { id: "1-1", name: "轨道", type: 2 },
            { id: "1-2", name: "姿态", type: 2 },
          ],
        },
        {
          name: "二维视图",
          id: "2",
          type: 1,
          children: [
            { id: "2-1", name: "属性", type: 2 },
            { id: "2-2", name: "轨迹", type: 2 },
          ],
        },
        {
          name: "三维视图",
          id: "3",
          type: 1,
          children: [
            { id: "3-1", name: "轨迹", type: 2 },
            { id: "3-2", name: "姿态球", type: 2 },
            { id: "3-3", name: "向量", type: 2 },
            { id: "3-4", name: "模型", type: 2 },
            { id: "3-5", name: "偏移量", type: 2 },
            { id: "3-6", name: "雷达散射界面", type: 2 },
          ],
        },
        {
          name: "约束",
          id: "4",
          type: 1,
          children: [{ id: "4-1", name: "基础", type: 2 }],
        },
      ],
      currentCpn: "BasicRail",
      defaultItem: "1-1",
      cpnMap: {
        "1-1轨道": "BasicRail",
        "1-2姿态": "BasicPosture",
        "2-1属性": "FlatAttribute",
        "2-2轨迹": "FlatTrail",
        "3-1轨迹": "ThreeDimTrail",
        "3-2姿态球": "ThreeDimPosture",
        "3-3向量": "ThreeDimVector",
        "3-4模型": "ThreeDimModel",
        "3-5偏移量": "ThreeDimOffset",
        "3-6雷达散射界面": "ThreeDimDispersion",
        "4-1基础": "BasicBind",
      },
    };
  },
  computed: {
    opened() {
      const opened = [];
      this.mockMenuData.map((item) => {
        opened.push(item.id);
      });
      return opened;
    },
  },
  methods: {
    handleMenuItemClick(subItem) {
      this.currentCpn = this.cpnMap[subItem.id + subItem.name];
    },
    loadCompontent() {},
  },
  created() {
    this.loadCompontent();
  },
};
</script>
<style scoped>
.modal-content {
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  box-sizing: content-box;
  background-color: #072043;
}
.icon-shuxian {
  color: #00efff;
}
.title {
  width: 100%;
  height: 40px;
  background-color: #1d395e;
  line-height: 40px;
  font-weight: 800;
  margin-bottom: 10px;
}
.main-content {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 500px;
  padding: 0 10px;
}
.left-nav {
  width: 140px;
  background-color: #223958;
  margin-right: 10px;
}
.right-info {
  flex: 1;
  background-color: #223958;
}
.el-menu {
  border-right: none;
}
/deep/.el-menu > .el-submenu .el-submenu__title {
  height: 30px !important;
  line-height: 30px !important;
  background-color: #1f4361 !important;
}
/* 菜单图标 */
/deep/.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(180deg) !important;
  transform: rotateZ(180deg) !important;
}
/deep/.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(-90deg) !important;
  -ms-transform: rotate(-90deg) !important;
  transform: rotateZ(-90deg) !important;
}
.el-menu > .el-menu-item {
  width: 100%;
  height: 30px !important;
  line-height: 30px !important;
  background-color: transparent !important;
}
/deep/.el-menu > .el-menu-item.is-active {
  background-color: #00758c !important;
  color: #fff !important;
}
/deep/.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 140px !important;
  min-height: 400px !important;
  overflow: hidden !important;
}
</style>
